<template>
	<div class="guide-demo" :class="[`guide-${index}`]" v-if="visible" @touchmove.stop.prevent>
		<div class="guide-demo__mask" @click="finish"></div>
		<div class="guide-demo__target" :style="style" @click="next"></div>

		<div class="guide-demo__item">
			<img src="@/assets/2/images/red-package/guide-btn.png" alt="" />
			<p>{{ text }}</p>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import store from 'store';
import moment from 'moment';
import $ from 'jquery';

export default {
	data() {
		return {
			index: null,
			visible: false,
			style: {},
			callback: null
		};
	},

	computed: {
		text() {
			switch (this.index) {
				case 1:
					return '点击“兑现金”';
				case 2:
					return '点击“兑换”';
				case 3:
					return '点击“我的”';
				case 4:
					return '点击“我的余额”进行提现';
			}
		}
	},

	methods: {
		open(index, callback) {
			const oldIndex = store.get('guide-index') || '';

			if (String(oldIndex).includes('close')) {
				return false;
			}

			if (!oldIndex && index != 1) {
				return false;
			}

			this.index = index;
			this.visible = true;

			store.set('guide-index', this.index);

			this.$nextTick(() => {
				let el = document.getElementById(`step-${this.index}`);

				if (el) {
					el.setAttribute('data-index', el.style['z-index']);
					el.style['z-index'] = 100000;
					el.style['box-shadow'] = '0 0 0 100vh rgba(0, 0, 0, 0.3)';

					const { left, top } = $(el).offset();

					this.style = {
						left: left + 'px',
						top: top + 'px',
						height: $(el).height() + 'px',
						width: $(el).width() + 'px'
					};
				}
			});

			this.callback = callback;
		},

		next() {
			if (this.callback) {
				this.close();
				this.callback({ close: this.close, finish: this.finish });
			}
		},

		close() {
			let el = document.getElementById(`step-${this.index}`);

			if (el) {
				el.style['z-index'] = el.getAttribute('data-index');
				el.style['box-shadow'] = 'none';
			}

			this.visible = false;
		},

		finish() {
			this.close();
			this.index = `close-${moment().format('YYYY-MM-DD HH:mm:ss')}`;
			store.set('guide-index', this.index);
		}
	}
};
</script>

<style lang="scss" scoped>
.guide-demo {
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	&__mask {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 110000;
	}

	&__target {
		position: fixed;
		z-index: 110001;
	}

	&__item {
		position: fixed;
		z-index: 110000;

		img {
			height: 88px;
			width: 85px;
		}

		p {
			font-size: 26px;
			color: #fff;
			position: relative;
		}
	}

	&.guide-1 {
		.guide-demo__item {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			right: 20px;
			top: 220px;

			img {
				margin: 0 10px 10px 10px;
			}
		}
	}

	&.guide-2 {
		.guide-demo__item {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			left: 230px;
			bottom: 520px;
			bottom: calc(520px + env(safe-area-inset-bottom));

			img {
				margin: 0 10px 10px 10px;
			}

			p {
				color: #fff;
				left: 90px;
			}
		}
	}

	&.guide-3 {
		.guide-demo__item {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			justify-content: flex-end;
			right: 70px;
			bottom: 100px;
			bottom: calc(100px + env(safe-area-inset-bottom));

			img {
				margin: 0 10px 10px 10px;
				display: block;
				transform: rotate(180deg);
			}
		}
	}

	&.guide-4 {
		.guide-demo__item {
			display: flex;
			align-items: center;
			left: 10px;
			top: 650px;

			img {
				margin: 0 10px 10px 100px;
				display: block;
				transform: rotate(180deg);
			}

			p {
				left: 10px;
			}
		}
	}
}
</style>
